﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/AdminSite.Master" AutoEventWireup="true"
    CodeBehind="CategoryItem.aspx.cs" Inherits="phudieuhungthinh.Admin.CategoryItem" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="/Styles/control-style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../third-party/tiny_mce/jquery.tinymce.js"></script>
    <script type="text/javascript" src="../third-party/tiny_mce/loadTinyMce.js"></script>
    <style type="text/css">
        .error-message
        {
            color: Red;
            height: 20px;
            width: 200px;
        }
        .btn-add
        {
            background-color: #ccc;
            color: black;
            font-family: 'Oswald';
            font-size: 20px;
            text-decoration: none;
            cursor: poiner;
            border: none;
            margin-top: 20px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            loadTinyMce();
        });
        $(document).ready(function () {
            ko.extenders.required = function (target, overrideMessage) {
                //add some sub-observables to our observable
                target.hasError = ko.observable();
                target.validationMessage = ko.observable();

                //define a function to do validation
                function validate(newValue) {
                    target.hasError(newValue ? false : true);
                    target.validationMessage(newValue ? "" : overrideMessage || "This field is required");
                }
                //initial validation
                validate(target());
                //validate whenever the value changes
                target.subscribe(validate);
                //return the original observable
                return target;
            };
            function categoryVM() {
                var id = decodeURIComponent($.urlParam('id'));
                var self = this;
                self.name_keyup = function () {
                    if (self.name().length > 100) {
                        $('.error-message').remove();
                        $('#p-name').append("<span class='error-message'>Max length is 300 characters.</span>");
                    }
                    else {
                        $('.error-message').remove();
                    }
                }
                if (id != 'null') {
                    $.ajax({
                        type: "POST",
                        url: "/Admin/CategoryItem.aspx/GetCategory",
                        contentType: "application/json",
                        data: JSON.stringify({ id: id }),
                        dataType: "json",
                        async: false,
                        success: function (data) {
                            self.name = ko.observable(data.d.Name).extend({ required: "*" });
                            self.description = ko.observable(data.d.Description);
                            if (self.name().length > 100) {
                                $('.error-message').remove();
                                $('#p-name').append("<span class='error-message'>Max length is 300 characters.</span>");
                            }
                            else {
                                $('.error-message').remove();
                            }
                        },
                        error: function () {
                            alert("Fail");
                        }
                    });
                }
                else {
                    self.name = ko.observable("").extend({ required: "*" });
                    self.description = ko.observable("");
                }
                self.save = function () {
                    // Send this model to server
                    if (self.name() == '' || self.name().length > 100) {
                        return;
                    }
                    var categoryModel = {
                        ID: id,
                        Name: self.name(),
                        Description: $('#txtaDescription').tinymce().getContent()
                    };
                    if (id == 'null') {
                        categoryModel.ID = 0;
                    }
                    $.ajax({
                        type: "POST",
                        url: "/Admin/CategoryItem.aspx/SaveCategory",
                        data: JSON.stringify({ categoryModel: categoryModel }),
                        contentType: "application/json",
                        success: function (data) {
                            window.location.href = "/Admin/CategoryList.aspx";
                        },
                        error: function () {
                            alert("Lưu thất bại");
                        }
                    });
                };
            }
            ko.applyBindings(new categoryVM());
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="content">
        <fieldset>
            <legend>Chuyên Mục</legend><span id="error-message"></span>
            <div>
                <div>
                    Tên chuyên mục:
                </div>
                <span id="p-name" data-bind="css: { error: name.hasError }">
                    <input data-bind="value: name, valueUpdate: 'afterkeydown', event:{keyup: name_keyup}"
                        type="text" style="margin-top: 10px; width: 400px;" />
                    <span data-bind='visible: name.hasError, text: name.validationMessage'></span>
                </span>
            </div>
            <div class="button save">
                <a href="javascript:void(0)" data-bind="click: save">Lưu</a>
            </div>
            <div style="margin-top: 20px">
                <textarea id="txtaDescription" style="height: 300px; width: 900px" class="tinymce"
                    rows="10" cols="2" data-bind="value: description"></textarea>
            </div>
        </fieldset>
    </div>
</asp:Content>
